import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

export default class SvgExample8 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg
          height="160"
          width="200"
        >
          <Text y="10" x="10" dx="5 5 50">
            <TSpan x="10" >tspan line 1</TSpan>
            <TSpan x="10" dy="15">tspan line 2</TSpan>
            <TSpan x="10" dx="10" dy="15">tspan line 3</TSpan>
          </Text>
          <Text x="10" y="60" fill="red" fontSize="14">
            <TSpan dy="5 10 20" >12345</TSpan>
            <TSpan fill="blue" dy="15" dx="0 5 5">
              <TSpan>6</TSpan>
              <TSpan>7</TSpan>
            </TSpan>
            <TSpan dx="0 10 20" dy="0 20" fontWeight="bold" fontSize="12">89a</TSpan>
          </Text>
          <Text y="140" dx="0 5 5" dy="0 -5 -5">delta on text</Text>
        </Svg>
      </View>
    );
  }
}